<template>
  <div class="cell-contain">
    <el-row>
      <el-col class="title-col" @click.native="expandCell">
        <span class="date-title"><i :class="arrowIcon" />  {{cellData.date}}</span>
      </el-col>
    </el-row>
    <el-row>
      <el-col class="table-col">
        <el-row style="margin-bottom: 20px" v-for="(cols, index) in cellData.reportCols" :key="index">
          <transition name="el-zoom-in-top">
            <el-table :data="cellData.reportData[index]" style="width: 100%" v-show="expand">
              <el-table-column v-for="(col,idx) in cols" :key="idx" :prop="col.prop" :label="col.label" :type="col.type" :width="col.width" :fixed="col.fixed">
                <el-table-column v-for="(child, index) in col.children" :key="index" :prop="child.prop" :label="child.label" >
                  <el-table-column v-for="(cell, cidx) in child.children" :key="cidx" :prop="cell.prop" :label="cell.label"></el-table-column>
                </el-table-column>
              </el-table-column>
            </el-table>
          </transition>
        </el-row>
      </el-col>
    </el-row>
  </div>

</template>

<script>
  export default {
    name: "rpDetailCell",
    props:{
      cellData:{
        type: Object,
        required:true
      }
    },
    computed:{
      arrowIcon(){
        return this.expand?'el-icon-arrow-up':'el-icon-arrow-right'
      }
    },
    data(){
      return {
        expand:false
      }
    },
    methods:{
      expandCell(){
        console.log("aaaaa")
        this.expand = !this.expand
      }
    }

  }
</script>

<style lang="scss" scoped>
  .cell-contain{
    padding: 5px;
  }
  .title-col{
    cursor: pointer;
    display: flex;
    height: 30px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;

    .date-title{
      margin-right: 20px;
      font-weight: bold;
    }
  }
  .table-col{
    padding-left: 30px;
  }

</style>
